<template>
  <div class="banner">
    <div class="search-wrapper">
      <search-panel></search-panel>
    </div>
    <el-carousel height="23.6em">
      <el-carousel-item v-for="img in imgs" :key="img.id">
        <div class="banner-img" v-bind:style="{ 'background-image': 'url('+img.url+')'}"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import SearchPanel from './SearchPanel';
export default {
  name: "BannerWrap",
  components: {
    SearchPanel
  },
  data() {
    return {
      imgs: [{
        id: '001',
        url: 'http://m.elongstatic.com/promotions/wireless/uploadImages/images/153819398837503.jpg'
      }, {
        id: '002',
        url: 'http://m.elongstatic.com/promotions/wireless/uploadImages/images149371001863360.jpg'
      }],
      swiperOption: {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.banner {
  overflow: hidden;
  height: 23.6em;
  background-color: #ccc;
  .banner-img {
    width: 100%;
    height: 23.6em;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .search-wrapper {
    margin: 0 auto;
    width: 70em;
  }
}
</style>
